<div *ngIf="!areZonesLoaded">
  <mat-progress-bar mode="buffer"></mat-progress-bar>
</div>

<div class="narrow-centered-section" *ngIf="zoneDefinitionSelected && areZonesLoaded" (mouseleave)="zonesService.updateZones()">
  <app-zone-tool-bar
    (zoneDefinitionSelectedChange)="onZoneDefinitionSelected($event)"
    [currentZonesLength]="currentZones.length"
    [zoneDefinitionSelected]="zoneDefinitionSelected"
    [zoneDefinitions]="zoneDefinitions">
  </app-zone-tool-bar>

  <app-zone *ngFor="let zone of currentZones; let zoneId = index;"
            [currentZones]="currentZones"
            [isFirstZone]="(zoneId === 0)"
            [isLastZone]="(zoneId === (currentZones.length - 1))"
            [nextZoneTo]="(currentZones[zoneId + 1]) ? currentZones[zoneId + 1].to : null"
            [prevZoneFrom]="(currentZones[zoneId - 1]) ? currentZones[zoneId - 1].from : null"
            [zoneDefinition]="zoneDefinitionSelected"
            [zoneFrom]="currentZones[zoneId].from"
            [zoneId]="zoneId"
            [zoneTo]="currentZones[zoneId].to"
            [zone]="zone">
  </app-zone>

  <app-zone-tool-bar
    (zoneDefinitionSelectedChange)="onZoneDefinitionSelected($event)"
    [currentZonesLength]="currentZones.length"
    [zoneDefinitionSelected]="zoneDefinitionSelected"
    [zoneDefinitions]="zoneDefinitions">
  </app-zone-tool-bar>
</div>


